<template>
    <div style="max-width: 600px;">
        <a-form :model="form">
            <a-form-item label="引擎">
                <a-select v-model:value="form.engine" @change="emitChange">
                    <a-select-option value="InnoDB">InnoDB</a-select-option>
                    <a-select-option value="MyISAM">MyISAM</a-select-option>
                    <a-select-option value="MEMORY">MEMORY</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="表空间">
                <a-input v-model:value="form.tablespace" @change="emitChange" />
            </a-form-item>
            <a-form-item label="字符集">
                <a-select v-model:value="form.charset" @change="emitChange">
                    <a-select-option value="utf8mb4">utf8mb4</a-select-option>
                    <a-select-option value="utf8">utf8</a-select-option>
                    <a-select-option value="latin1">latin1</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="排序规则">
                <a-select v-model:value="form.collation" @change="emitChange">
                    <a-select-option value="utf8mb4_general_ci">utf8mb4_general_ci</a-select-option>
                    <a-select-option value="utf8mb4_unicode_ci">utf8mb4_unicode_ci</a-select-option>
                    <a-select-option value="utf8_general_ci">utf8_general_ci</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="自动递增">
                <a-input v-model:value="form.auto_increment" @change="emitChange" />
            </a-form-item>
            <a-form-item label="行格式">
                <a-select v-model:value="form.row_format" @change="emitChange">
                    <a-select-option value="DYNAMIC">DYNAMIC</a-select-option>
                    <a-select-option value="COMPACT">COMPACT</a-select-option>
                    <a-select-option value="REDUNDANT">REDUNDANT</a-select-option>
                    <a-select-option value="COMPRESSED">COMPRESSED</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="平均行长度">
                <a-input v-model:value="form.avg_row_length" @change="emitChange" />
            </a-form-item>
            <a-form-item label="最小行数">
                <a-input v-model:value="form.min_rows" @change="emitChange" />
            </a-form-item>
            <a-form-item label="最大行数">
                <a-input v-model:value="form.max_rows" @change="emitChange" />
            </a-form-item>
            <a-form-item label="键块大小">
                <a-input v-model:value="form.key_block_size" @change="emitChange" />
            </a-form-item>
            <a-form-item label="数据目录">
                <a-input v-model:value="form.data_dir" @change="emitChange" />
            </a-form-item>
            <a-form-item label="索引目录">
                <a-input v-model:value="form.index_dir" @change="emitChange" />
            </a-form-item>
            <a-form-item label="统计数据自动重计">
                <a-select v-model:value="form.stats_auto_recalc" @change="emitChange">
                    <a-select-option value="DEFAULT">DEFAULT</a-select-option>
                    <a-select-option value="0">0</a-select-option>
                    <a-select-option value="1">1</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="统计数据持久">
                <a-select v-model:value="form.stats_persistent" @change="emitChange">
                    <a-select-option value="DEFAULT">DEFAULT</a-select-option>
                    <a-select-option value="0">0</a-select-option>
                    <a-select-option value="1">1</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="统计样本页面">
                <a-input v-model:value="form.stats_sample_pages" @change="emitChange" />
            </a-form-item>
            <a-form-item label="压缩">
                <a-select v-model:value="form.compression" @change="emitChange">
                    <a-select-option value="">无</a-select-option>
                    <a-select-option value="zlib">zlib</a-select-option>
                    <a-select-option value="lz4">lz4</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="加密">
                <a-checkbox v-model:checked="form.encryption" @change="emitChange">加密</a-checkbox>
            </a-form-item>
            <a-form-item label="分区">
                <a-input v-model:value="form.partition" @change="emitChange" />
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
    table_name: string
    options?: any
}>()
const emits = defineEmits(['update:options'])

const form = ref({
    engine: 'InnoDB',
    tablespace: '',
    charset: 'utf8mb4',
    collation: 'utf8mb4_general_ci',
    auto_increment: '',
    row_format: 'DYNAMIC',
    avg_row_length: '',
    min_rows: '',
    max_rows: '',
    key_block_size: '',
    data_dir: '',
    index_dir: '',
    stats_auto_recalc: 'DEFAULT',
    stats_persistent: 'DEFAULT',
    stats_sample_pages: '',
    compression: '',
    encryption: false,
    partition: ''
})

watch(
    () => props.options,
    (val) => {
        if (val) Object.assign(form.value, val)
    },
    { immediate: true, deep: true }
)

function emitChange() {
    emits('update:options', { ...form.value })
}
</script>
